<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>移动到某一个节点后，高亮所有相邻的节点和边</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: 'Myriel',
          },
          {
            id: 'Napoleon',
          },
          {
            id: 'Mlle.Baptistine',
          },
          {
            id: 'Mme.Magloire',
          },
          {
            id: 'CountessdeLo',
          },
          {
            id: 'Geborand',
          },
          {
            id: 'Champtercier',
          },
          {
            id: 'Cravatte',
          },
          {
            id: 'Count',
          },
          {
            id: 'OldMan',
          },
          {
            id: 'Labarre',
          },
          {
            id: 'Valjean',
          },
          {
            id: 'Marguerite',
          },
          {
            id: 'Mme.deR',
          },
          {
            id: 'Isabeau',
          },
          {
            id: 'Gervais',
          },
          {
            id: 'Tholomyes',
          },
          {
            id: 'Listolier',
          },
          {
            id: 'Fameuil',
          },
          {
            id: 'Blacheville',
          },
          {
            id: 'Favourite',
          },
          {
            id: 'Dahlia',
          },
          {
            id: 'Zephine',
          },
          {
            id: 'Fantine',
          },
          {
            id: 'Mme.Thenardier',
          },
          {
            id: 'Thenardier',
          },
          {
            id: 'Cosette',
          },
          {
            id: 'Javert',
          },
          {
            id: 'Fauchelevent',
          },
          {
            id: 'Bamatabois',
          },
          {
            id: 'Perpetue',
          },
          {
            id: 'Simplice',
          },
          {
            id: 'Scaufflaire',
          },
          {
            id: 'Woman1',
          },
          {
            id: 'Judge',
          },
          {
            id: 'Champmathieu',
          },
          {
            id: 'Brevet',
          },
          {
            id: 'Chenildieu',
          },
          {
            id: 'Cochepaille',
          },
          {
            id: 'Pontmercy',
          },
          {
            id: 'Boulatruelle',
          },
          {
            id: 'Eponine',
          },
          {
            id: 'Anzelma',
          },
          {
            id: 'Woman2',
          },
          {
            id: 'MotherInnocent',
          },
          {
            id: 'Gribier',
          },
          {
            id: 'Jondrette',
          },
          {
            id: 'Mme.Burgon',
          },
          {
            id: 'Gavroche',
          },
          {
            id: 'Gillenormand',
          },
          {
            id: 'Magnon',
          },
          {
            id: 'Mlle.Gillenormand',
          },
          {
            id: 'Mme.Pontmercy',
          },
          {
            id: 'Mlle.Vaubois',
          },
          {
            id: 'Lt.Gillenormand',
          },
          {
            id: 'Marius',
          },
          {
            id: 'BaronessT',
          },
          {
            id: 'Mabeuf',
          },
          {
            id: 'Enjolras',
          },
          {
            id: 'Combeferre',
          },
          {
            id: 'Prouvaire',
          },
          {
            id: 'Feuilly',
          },
          {
            id: 'Courfeyrac',
          },
          {
            id: 'Bahorel',
          },
          {
            id: 'Bossuet',
          },
          {
            id: 'Joly',
          },
          {
            id: 'Grantaire',
          },
          {
            id: 'MotherPlutarch',
          },
          {
            id: 'Gueulemer',
          },
          {
            id: 'Babet',
          },
          {
            id: 'Claquesous',
          },
          {
            id: 'Montparnasse',
          },
          {
            id: 'Toussaint',
          },
          {
            id: 'Child1',
          },
          {
            id: 'Child2',
          },
          {
            id: 'Brujon',
          },
          {
            id: 'Mme.Hucheloup',
          },
        ],
        edges: [
          {
            source: 'Napoleon',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Mlle.Baptistine',
            target: 'Myriel',
            value: 8,
          },
          {
            source: 'Mme.Magloire',
            target: 'Myriel',
            value: 10,
          },
          {
            source: 'Mme.Magloire',
            target: 'Mlle.Baptistine',
            value: 6,
          },
          {
            source: 'CountessdeLo',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Geborand',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Champtercier',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Cravatte',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Count',
            target: 'Myriel',
            value: 2,
          },
          {
            source: 'OldMan',
            target: 'Myriel',
            value: 1,
          },
          {
            source: 'Valjean',
            target: 'Labarre',
            value: 1,
          },
          {
            source: 'Valjean',
            target: 'Mme.Magloire',
            value: 3,
          },
          {
            source: 'Valjean',
            target: 'Mlle.Baptistine',
            value: 3,
          },
          {
            source: 'Valjean',
            target: 'Myriel',
            value: 5,
          },
          {
            source: 'Marguerite',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Mme.deR',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Isabeau',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Gervais',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Listolier',
            target: 'Tholomyes',
            value: 4,
          },
          {
            source: 'Fameuil',
            target: 'Tholomyes',
            value: 4,
          },
          {
            source: 'Fameuil',
            target: 'Listolier',
            value: 4,
          },
          {
            source: 'Blacheville',
            target: 'Tholomyes',
            value: 4,
          },
          {
            source: 'Blacheville',
            target: 'Listolier',
            value: 4,
          },
          {
            source: 'Blacheville',
            target: 'Fameuil',
            value: 4,
          },
          {
            source: 'Favourite',
            target: 'Tholomyes',
            value: 3,
          },
          {
            source: 'Favourite',
            target: 'Listolier',
            value: 3,
          },
          {
            source: 'Favourite',
            target: 'Fameuil',
            value: 3,
          },
          {
            source: 'Favourite',
            target: 'Blacheville',
            value: 4,
          },
          {
            source: 'Dahlia',
            target: 'Tholomyes',
            value: 3,
          },
          {
            source: 'Dahlia',
            target: 'Listolier',
            value: 3,
          },
          {
            source: 'Dahlia',
            target: 'Fameuil',
            value: 3,
          },
          {
            source: 'Dahlia',
            target: 'Blacheville',
            value: 3,
          },
          {
            source: 'Dahlia',
            target: 'Favourite',
            value: 5,
          },
          {
            source: 'Zephine',
            target: 'Tholomyes',
            value: 3,
          },
          {
            source: 'Zephine',
            target: 'Listolier',
            value: 3,
          },
          {
            source: 'Zephine',
            target: 'Fameuil',
            value: 3,
          },
          {
            source: 'Zephine',
            target: 'Blacheville',
            value: 3,
          },
          {
            source: 'Zephine',
            target: 'Favourite',
            value: 4,
          },
          {
            source: 'Zephine',
            target: 'Dahlia',
            value: 4,
          },
          {
            source: 'Fantine',
            target: 'Tholomyes',
            value: 3,
          },
          {
            source: 'Fantine',
            target: 'Listolier',
            value: 3,
          },
          {
            source: 'Fantine',
            target: 'Fameuil',
            value: 3,
          },
          {
            source: 'Fantine',
            target: 'Blacheville',
            value: 3,
          },
          {
            source: 'Fantine',
            target: 'Favourite',
            value: 4,
          },
          {
            source: 'Fantine',
            target: 'Dahlia',
            value: 4,
          },
          {
            source: 'Fantine',
            target: 'Zephine',
            value: 4,
          },
          {
            source: 'Fantine',
            target: 'Marguerite',
            value: 2,
          },
          {
            source: 'Fantine',
            target: 'Valjean',
            value: 9,
          },
          {
            source: 'Mme.Thenardier',
            target: 'Fantine',
            value: 2,
          },
          {
            source: 'Mme.Thenardier',
            target: 'Valjean',
            value: 7,
          },
          {
            source: 'Thenardier',
            target: 'Mme.Thenardier',
            value: 13,
          },
          {
            source: 'Thenardier',
            target: 'Fantine',
            value: 1,
          },
          {
            source: 'Thenardier',
            target: 'Valjean',
            value: 12,
          },
          {
            source: 'Cosette',
            target: 'Mme.Thenardier',
            value: 4,
          },
          {
            source: 'Cosette',
            target: 'Valjean',
            value: 31,
          },
          {
            source: 'Cosette',
            target: 'Tholomyes',
            value: 1,
          },
          {
            source: 'Cosette',
            target: 'Thenardier',
            value: 1,
          },
          {
            source: 'Javert',
            target: 'Valjean',
            value: 17,
          },
          {
            source: 'Javert',
            target: 'Fantine',
            value: 5,
          },
          {
            source: 'Javert',
            target: 'Thenardier',
            value: 5,
          },
          {
            source: 'Javert',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Javert',
            target: 'Cosette',
            value: 1,
          },
          {
            source: 'Fauchelevent',
            target: 'Valjean',
            value: 8,
          },
          {
            source: 'Fauchelevent',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Bamatabois',
            target: 'Fantine',
            value: 1,
          },
          {
            source: 'Bamatabois',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Bamatabois',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Perpetue',
            target: 'Fantine',
            value: 1,
          },
          {
            source: 'Simplice',
            target: 'Perpetue',
            value: 2,
          },
          {
            source: 'Simplice',
            target: 'Valjean',
            value: 3,
          },
          {
            source: 'Simplice',
            target: 'Fantine',
            value: 2,
          },
          {
            source: 'Simplice',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Scaufflaire',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Woman1',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Woman1',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Judge',
            target: 'Valjean',
            value: 3,
          },
          {
            source: 'Judge',
            target: 'Bamatabois',
            value: 2,
          },
          {
            source: 'Champmathieu',
            target: 'Valjean',
            value: 3,
          },
          {
            source: 'Champmathieu',
            target: 'Judge',
            value: 3,
          },
          {
            source: 'Champmathieu',
            target: 'Bamatabois',
            value: 2,
          },
          {
            source: 'Brevet',
            target: 'Judge',
            value: 2,
          },
          {
            source: 'Brevet',
            target: 'Champmathieu',
            value: 2,
          },
          {
            source: 'Brevet',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Brevet',
            target: 'Bamatabois',
            value: 1,
          },
          {
            source: 'Chenildieu',
            target: 'Judge',
            value: 2,
          },
          {
            source: 'Chenildieu',
            target: 'Champmathieu',
            value: 2,
          },
          {
            source: 'Chenildieu',
            target: 'Brevet',
            value: 2,
          },
          {
            source: 'Chenildieu',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Chenildieu',
            target: 'Bamatabois',
            value: 1,
          },
          {
            source: 'Cochepaille',
            target: 'Judge',
            value: 2,
          },
          {
            source: 'Cochepaille',
            target: 'Champmathieu',
            value: 2,
          },
          {
            source: 'Cochepaille',
            target: 'Brevet',
            value: 2,
          },
          {
            source: 'Cochepaille',
            target: 'Chenildieu',
            value: 2,
          },
          {
            source: 'Cochepaille',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Cochepaille',
            target: 'Bamatabois',
            value: 1,
          },
          {
            source: 'Pontmercy',
            target: 'Thenardier',
            value: 1,
          },
          {
            source: 'Boulatruelle',
            target: 'Thenardier',
            value: 1,
          },
          {
            source: 'Eponine',
            target: 'Mme.Thenardier',
            value: 2,
          },
          {
            source: 'Eponine',
            target: 'Thenardier',
            value: 3,
          },
          {
            source: 'Anzelma',
            target: 'Eponine',
            value: 2,
          },
          {
            source: 'Anzelma',
            target: 'Thenardier',
            value: 2,
          },
          {
            source: 'Anzelma',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Woman2',
            target: 'Valjean',
            value: 3,
          },
          {
            source: 'Woman2',
            target: 'Cosette',
            value: 1,
          },
          {
            source: 'Woman2',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'MotherInnocent',
            target: 'Fauchelevent',
            value: 3,
          },
          {
            source: 'MotherInnocent',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Gribier',
            target: 'Fauchelevent',
            value: 2,
          },
          {
            source: 'Mme.Burgon',
            target: 'Jondrette',
            value: 1,
          },
          {
            source: 'Gavroche',
            target: 'Mme.Burgon',
            value: 2,
          },
          {
            source: 'Gavroche',
            target: 'Thenardier',
            value: 1,
          },
          {
            source: 'Gavroche',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Gavroche',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Gillenormand',
            target: 'Cosette',
            value: 3,
          },
          {
            source: 'Gillenormand',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Magnon',
            target: 'Gillenormand',
            value: 1,
          },
          {
            source: 'Magnon',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Mlle.Gillenormand',
            target: 'Gillenormand',
            value: 9,
          },
          {
            source: 'Mlle.Gillenormand',
            target: 'Cosette',
            value: 2,
          },
          {
            source: 'Mlle.Gillenormand',
            target: 'Valjean',
            value: 2,
          },
          {
            source: 'Mme.Pontmercy',
            target: 'Mlle.Gillenormand',
            value: 1,
          },
          {
            source: 'Mme.Pontmercy',
            target: 'Pontmercy',
            value: 1,
          },
          {
            source: 'Mlle.Vaubois',
            target: 'Mlle.Gillenormand',
            value: 1,
          },
          {
            source: 'Lt.Gillenormand',
            target: 'Mlle.Gillenormand',
            value: 2,
          },
          {
            source: 'Lt.Gillenormand',
            target: 'Gillenormand',
            value: 1,
          },
          {
            source: 'Lt.Gillenormand',
            target: 'Cosette',
            value: 1,
          },
          {
            source: 'Marius',
            target: 'Mlle.Gillenormand',
            value: 6,
          },
          {
            source: 'Marius',
            target: 'Gillenormand',
            value: 12,
          },
          {
            source: 'Marius',
            target: 'Pontmercy',
            value: 1,
          },
          {
            source: 'Marius',
            target: 'Lt.Gillenormand',
            value: 1,
          },
          {
            source: 'Marius',
            target: 'Cosette',
            value: 21,
          },
          {
            source: 'Marius',
            target: 'Valjean',
            value: 19,
          },
          {
            source: 'Marius',
            target: 'Tholomyes',
            value: 1,
          },
          {
            source: 'Marius',
            target: 'Thenardier',
            value: 2,
          },
          {
            source: 'Marius',
            target: 'Eponine',
            value: 5,
          },
          {
            source: 'Marius',
            target: 'Gavroche',
            value: 4,
          },
          {
            source: 'BaronessT',
            target: 'Gillenormand',
            value: 1,
          },
          {
            source: 'BaronessT',
            target: 'Marius',
            value: 1,
          },
          {
            source: 'Mabeuf',
            target: 'Marius',
            value: 1,
          },
          {
            source: 'Mabeuf',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Mabeuf',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Enjolras',
            target: 'Marius',
            value: 7,
          },
          {
            source: 'Enjolras',
            target: 'Gavroche',
            value: 7,
          },
          {
            source: 'Enjolras',
            target: 'Javert',
            value: 6,
          },
          {
            source: 'Enjolras',
            target: 'Mabeuf',
            value: 1,
          },
          {
            source: 'Enjolras',
            target: 'Valjean',
            value: 4,
          },
          {
            source: 'Combeferre',
            target: 'Enjolras',
            value: 15,
          },
          {
            source: 'Combeferre',
            target: 'Marius',
            value: 5,
          },
          {
            source: 'Combeferre',
            target: 'Gavroche',
            value: 6,
          },
          {
            source: 'Combeferre',
            target: 'Mabeuf',
            value: 2,
          },
          {
            source: 'Prouvaire',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Prouvaire',
            target: 'Enjolras',
            value: 4,
          },
          {
            source: 'Prouvaire',
            target: 'Combeferre',
            value: 2,
          },
          {
            source: 'Feuilly',
            target: 'Gavroche',
            value: 2,
          },
          {
            source: 'Feuilly',
            target: 'Enjolras',
            value: 6,
          },
          {
            source: 'Feuilly',
            target: 'Prouvaire',
            value: 2,
          },
          {
            source: 'Feuilly',
            target: 'Combeferre',
            value: 5,
          },
          {
            source: 'Feuilly',
            target: 'Mabeuf',
            value: 1,
          },
          {
            source: 'Feuilly',
            target: 'Marius',
            value: 1,
          },
          {
            source: 'Courfeyrac',
            target: 'Marius',
            value: 9,
          },
          {
            source: 'Courfeyrac',
            target: 'Enjolras',
            value: 17,
          },
          {
            source: 'Courfeyrac',
            target: 'Combeferre',
            value: 13,
          },
          {
            source: 'Courfeyrac',
            target: 'Gavroche',
            value: 7,
          },
          {
            source: 'Courfeyrac',
            target: 'Mabeuf',
            value: 2,
          },
          {
            source: 'Courfeyrac',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Courfeyrac',
            target: 'Feuilly',
            value: 6,
          },
          {
            source: 'Courfeyrac',
            target: 'Prouvaire',
            value: 3,
          },
          {
            source: 'Bahorel',
            target: 'Combeferre',
            value: 5,
          },
          {
            source: 'Bahorel',
            target: 'Gavroche',
            value: 5,
          },
          {
            source: 'Bahorel',
            target: 'Courfeyrac',
            value: 6,
          },
          {
            source: 'Bahorel',
            target: 'Mabeuf',
            value: 2,
          },
          {
            source: 'Bahorel',
            target: 'Enjolras',
            value: 4,
          },
          {
            source: 'Bahorel',
            target: 'Feuilly',
            value: 3,
          },
          {
            source: 'Bahorel',
            target: 'Prouvaire',
            value: 2,
          },
          {
            source: 'Bahorel',
            target: 'Marius',
            value: 1,
          },
          {
            source: 'Bossuet',
            target: 'Marius',
            value: 5,
          },
          {
            source: 'Bossuet',
            target: 'Courfeyrac',
            value: 12,
          },
          {
            source: 'Bossuet',
            target: 'Gavroche',
            value: 5,
          },
          {
            source: 'Bossuet',
            target: 'Bahorel',
            value: 4,
          },
          {
            source: 'Bossuet',
            target: 'Enjolras',
            value: 10,
          },
          {
            source: 'Bossuet',
            target: 'Feuilly',
            value: 6,
          },
          {
            source: 'Bossuet',
            target: 'Prouvaire',
            value: 2,
          },
          {
            source: 'Bossuet',
            target: 'Combeferre',
            value: 9,
          },
          {
            source: 'Bossuet',
            target: 'Mabeuf',
            value: 1,
          },
          {
            source: 'Bossuet',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Joly',
            target: 'Bahorel',
            value: 5,
          },
          {
            source: 'Joly',
            target: 'Bossuet',
            value: 7,
          },
          {
            source: 'Joly',
            target: 'Gavroche',
            value: 3,
          },
          {
            source: 'Joly',
            target: 'Courfeyrac',
            value: 5,
          },
          {
            source: 'Joly',
            target: 'Enjolras',
            value: 5,
          },
          {
            source: 'Joly',
            target: 'Feuilly',
            value: 5,
          },
          {
            source: 'Joly',
            target: 'Prouvaire',
            value: 2,
          },
          {
            source: 'Joly',
            target: 'Combeferre',
            value: 5,
          },
          {
            source: 'Joly',
            target: 'Mabeuf',
            value: 1,
          },
          {
            source: 'Joly',
            target: 'Marius',
            value: 2,
          },
          {
            source: 'Grantaire',
            target: 'Bossuet',
            value: 3,
          },
          {
            source: 'Grantaire',
            target: 'Enjolras',
            value: 3,
          },
          {
            source: 'Grantaire',
            target: 'Combeferre',
            value: 1,
          },
          {
            source: 'Grantaire',
            target: 'Courfeyrac',
            value: 2,
          },
          {
            source: 'Grantaire',
            target: 'Joly',
            value: 2,
          },
          {
            source: 'Grantaire',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Grantaire',
            target: 'Bahorel',
            value: 1,
          },
          {
            source: 'Grantaire',
            target: 'Feuilly',
            value: 1,
          },
          {
            source: 'Grantaire',
            target: 'Prouvaire',
            value: 1,
          },
          {
            source: 'MotherPlutarch',
            target: 'Mabeuf',
            value: 3,
          },
          {
            source: 'Gueulemer',
            target: 'Thenardier',
            value: 5,
          },
          {
            source: 'Gueulemer',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Gueulemer',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Gueulemer',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Gueulemer',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Gueulemer',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Babet',
            target: 'Thenardier',
            value: 6,
          },
          {
            source: 'Babet',
            target: 'Gueulemer',
            value: 6,
          },
          {
            source: 'Babet',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Babet',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Babet',
            target: 'Javert',
            value: 2,
          },
          {
            source: 'Babet',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Babet',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Claquesous',
            target: 'Thenardier',
            value: 4,
          },
          {
            source: 'Claquesous',
            target: 'Babet',
            value: 4,
          },
          {
            source: 'Claquesous',
            target: 'Gueulemer',
            value: 4,
          },
          {
            source: 'Claquesous',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Claquesous',
            target: 'Mme.Thenardier',
            value: 1,
          },
          {
            source: 'Claquesous',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Claquesous',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Claquesous',
            target: 'Enjolras',
            value: 1,
          },
          {
            source: 'Montparnasse',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Montparnasse',
            target: 'Babet',
            value: 2,
          },
          {
            source: 'Montparnasse',
            target: 'Gueulemer',
            value: 2,
          },
          {
            source: 'Montparnasse',
            target: 'Claquesous',
            value: 2,
          },
          {
            source: 'Montparnasse',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Montparnasse',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Montparnasse',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Montparnasse',
            target: 'Thenardier',
            value: 1,
          },
          {
            source: 'Toussaint',
            target: 'Cosette',
            value: 2,
          },
          {
            source: 'Toussaint',
            target: 'Javert',
            value: 1,
          },
          {
            source: 'Toussaint',
            target: 'Valjean',
            value: 1,
          },
          {
            source: 'Child1',
            target: 'Gavroche',
            value: 2,
          },
          {
            source: 'Child2',
            target: 'Gavroche',
            value: 2,
          },
          {
            source: 'Child2',
            target: 'Child1',
            value: 3,
          },
          {
            source: 'Brujon',
            target: 'Babet',
            value: 3,
          },
          {
            source: 'Brujon',
            target: 'Gueulemer',
            value: 3,
          },
          {
            source: 'Brujon',
            target: 'Thenardier',
            value: 3,
          },
          {
            source: 'Brujon',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Brujon',
            target: 'Eponine',
            value: 1,
          },
          {
            source: 'Brujon',
            target: 'Claquesous',
            value: 1,
          },
          {
            source: 'Brujon',
            target: 'Montparnasse',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Bossuet',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Joly',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Grantaire',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Bahorel',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Courfeyrac',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Gavroche',
            value: 1,
          },
          {
            source: 'Mme.Hucheloup',
            target: 'Enjolras',
            value: 1,
          },
        ],
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: window.innerWidth,
        height: window.innerHeight,
        autoPaint: false,
        defaultNode: {
          size: [10, 10],
          color: 'steelblue',
          style: {
            lineWidth: 2,
            fill: 'steelblue',
          },
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: '#e2e2e2',
            lineAppendWidth: 2,
          },
        },
        nodeStateStyles: {
          highlight: {
            opacity: 1,
          },
          dark: {
            opacity: 0.2,
          },
        },
        edgeStateStyles: {
          highlight: {
            stroke: '#999',
          },
        },
      });

      function clearAllStats() {
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
        });

        graph.getEdges().forEach(function(edge) {
          graph.clearItemStates(edge);
        });
        graph.paint();
        graph.setAutoPaint(true);
      }
      graph.on('node:mouseenter', function(e) {
        var item = e.item;

        graph.setAutoPaint(false);

        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
          graph.setItemState(node, 'dark', true);
        });

        graph.setItemState(item, 'dark', false);
        graph.setItemState(item, 'highlight', true);
        graph.getEdges().forEach(function(edge) {
          if (edge.getSource() === item) {
            graph.setItemState(edge.getTarget(), 'dark', false);
            graph.setItemState(edge.getTarget(), 'highlight', true);
            graph.setItemState(edge, 'highlight', true);
            edge.toFront();
          } else if (edge.getTarget() === item) {
            graph.setItemState(edge.getSource(), 'dark', false);
            graph.setItemState(edge.getSource(), 'highlight', true);
            graph.setItemState(edge, 'highlight', true);
            edge.toFront();
          } else {
            graph.setItemState(edge, 'highlight', false);
          }
        });

        graph.paint();
        graph.setAutoPaint(true);
      });
      graph.on('node:mouseleave', clearAllStats);
      graph.on('canvas:click', clearAllStats);

      graph.data({
        nodes: data.nodes,
        edges: data.edges.map(function(edge, i) {
          edge.id = 'edge' + i;
          return Object.assign({}, edge);
        }),
      });
      var simulation = d3
        .forceSimulation()
        .force(
          'link',
          d3
            .forceLink()
            .id(function(d) {
              return d.id;
            })
            .strength(0.5),
        )
        .force('charge', d3.forceManyBody())
        .force('center', d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2));
      simulation.nodes(data.nodes).on('tick', ticked);
      simulation.force('link').links(data.edges);

      graph.render();

      function ticked() {
        graph.refreshPositions();
        graph.paint();
      }
    </script>
  </body>
</html>
